<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>橄榄球俱乐部</title>
    <link
      rel="stylesheet"
      href="././node_modules/bootstrap/dist/css/bootstrap.min.css"
    />
    <link
      rel="stylesheet"
      href="././node_modules/bootstrap-icons/font/bootstrap-icons.css"
    />

    <style>
      /* 全局样式 */
      body {
        font-family: "Microsoft YaHei", sans-serif;
      }

      /* 导航栏 Logo */
      .navbar-brand {
        font-size: 1.5rem;
        letter-spacing: 1px;
      }

      .navbar-brand .text-primary {
        font-weight: 800;
      }

      /* 英雄区域 */
      .hero-section {
        background-size: cover;
        height: 500px;
        display: flex;
        align-items: center;
        position: relative;
      }

      .hero-section::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
      }

      .hero-section .container {
        position: relative;
        z-index: 1;
        padding: 0 2rem;
        margin: 0 auto;
        padding-left: calc(
          (100% - 1320px) / 2 + 12px
        ); /* 与Bootstrap容器对齐 */
      }

      .hero-section .display-4 {
        margin-bottom: 1.5rem;
        font-weight: 600;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
        font-size: 3.2rem;
      }

      /* 章节标题 */
      .section-title {
        font-size: 2rem;
        font-weight: bold;
        margin-bottom: 2rem;
        text-align: center;
      }

      /* 新闻卡片 */
      .card {
        transition: transform 0.3s ease;
      }

      .card:hover {
        transform: translateY(-5px);
      }

      .card-img-top {
        height: 200px;
        object-fit: cover;
      }

      /* 赛程项目 */
      .schedule-category {
        background: white;
        border-radius: 12px;
        padding: 1.5rem;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
      }

      .category-title {
        font-size: 1.5rem;
        color: #2c3e50;
        margin-bottom: 1.5rem;
        font-weight: 600;
        position: relative;
        padding-left: 1rem;
      }

      .category-title::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 20px;
        background: #007bff;
        border-radius: 2px;
      }

      .schedule-item {
        transition: background-color 0.3s ease;
        border: 1px solid rgba(0, 0, 0, 0.05);
        margin-bottom: 1rem;
      }

      .schedule-item:hover {
        background-color: #e9ecef !important;
      }

      .schedule-item:last-child {
        margin-bottom: 0;
      }

      .match-info {
        line-height: 1.4;
      }

      .match-meta {
        font-size: 0.875rem;
      }

      .match-time {
        font-weight: 600;
        color: #2c3e50;
      }

      .badge {
        padding: 0.5em 0.8em;
        font-weight: 500;
      }

      /* 球队照片 */
      .team-photos img {
        transition: transform 0.3s ease;
      }

      .team-photos img:hover {
        transform: scale(1.05);
      }

      /* 响应式调整 */
      @media (max-width: 768px) {
        .hero-section {
          height: 300px;
        }

        .hero-section h1 {
          font-size: 2rem;
        }
      }

      /* 轮播图样式 */
      .carousel-fade .carousel-item {
        opacity: 0;
        transition-duration: 0.6s;
        transition-property: opacity;
      }

      .carousel-fade .carousel-item.active,
      .carousel-fade .carousel-item-next.carousel-item-start,
      .carousel-fade .carousel-item-prev.carousel-item-end {
        opacity: 1;
      }

      .carousel-fade .active.carousel-item-start,
      .carousel-fade .active.carousel-item-end {
        opacity: 0;
      }

      .carousel-fade .carousel-item-next,
      .carousel-fade .carousel-item-prev,
      .carousel-fade .carousel-item.active,
      .carousel-fade .active.carousel-item-start,
      .carousel-fade .active.carousel-item-prev {
        transform: translateX(0);
        transform: translate3d(0, 0, 0);
      }

      .carousel-item {
        height: 500px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
      }

      .carousel {
        position: relative;
        overflow: hidden;
      }

      .carousel-indicators {
        z-index: 2;
      }

      .carousel-control-prev,
      .carousel-control-next {
        z-index: 2;
      }

      /* 修复轮播图文字重叠问题 */
      .carousel-item {
        position: relative;
      }

      .carousel-item .container {
        position: relative;
        z-index: 3;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }

      /* 轮播图文字动画 */
      .carousel-item.active .display-4,
      .carousel-item.active .mt-4 {
        animation: fadeInDown 1s ease-out;
        animation-fill-mode: both;
      }

      @keyframes fadeInDown {
        from {
          opacity: 0;
          transform: translateY(-20px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      /* 赛事统计 */
      .statistics .card {
        border: none;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
        height: 100%;
      }

      .statistics .card-header {
        background-color: #fff;
        border-bottom: none;
        padding: 1.5rem 1.5rem 1rem;
      }

      .statistics h3 {
        font-size: 1.5rem;
        margin: 0;
        color: #2c3e50;
        font-weight: 600;
      }

      .statistics .table {
        margin-bottom: 0;
      }

      .statistics .table tr {
        transition: background-color 0.3s ease;
      }

      .statistics .table tr:hover {
        background-color: #f8f9fa;
      }

      .statistics .table td {
        padding: 1rem 1.5rem;
        border-top: 1px solid rgba(0, 0, 0, 0.05);
      }

      .statistics .rank-item {
        background-color: #f8f9fa;
        border-radius: 8px;
        padding: 0.75rem 1rem;
        margin-bottom: 0.5rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .statistics .rank-item:last-child {
        margin-bottom: 0;
      }

      /* 轮播图按钮样式优化 */
      .hero-section .btn {
        padding: 0.75rem 2rem;
        font-size: 1.1rem;
      }

      /* 导航栏样式优化 */
      .navbar {
        padding: 1rem 0;
      }

      .nav-auth .btn {
        padding: 0.5rem 1.5rem;
      }

      .nav-auth .btn-outline-light:hover {
        background-color: rgba(255, 255, 255, 0.1);
      }

      /* 页脚样式 */
      .footer-section h5 {
        font-size: 1.2rem;
        font-weight: 600;
        margin-bottom: 1.5rem;
        position: relative;
        padding-bottom: 0.5rem;
      }

      .footer-section h5::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 30px;
        height: 2px;
        background: #007bff;
      }

      .footer-links {
        list-style: none;
        padding: 0;
        margin: 0;
      }

      .footer-links li {
        margin-bottom: 0.8rem;
      }

      .footer-links a {
        color: #fff;
        text-decoration: none;
        transition: color 0.3s ease;
      }

      .footer-links a:hover {
        color: #007bff;
      }

      .footer-contact {
        list-style: none;
        padding: 0;
        margin: 0;
      }

      .footer-contact li {
        margin-bottom: 1rem;
        display: flex;
        align-items: center;
      }

      .footer-contact i {
        color: #007bff;
        margin-right: 0.5rem;
      }

      .social-links {
        display: flex;
        gap: 1rem;
      }

      .social-link {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 50%;
        color: #fff;
        text-decoration: none;
        transition: all 0.3s ease;
      }

      .social-link:hover {
        background: #007bff;
        color: #fff;
        transform: translateY(-2px);
      }

      .qr-code {
        max-width: 120px;
        margin: 0 auto;
      }

      .qr-code img {
        border-radius: 8px;
      }

      .qr-code p {
        font-size: 0.875rem;
        margin-top: 0.5rem;
      }

      .footer-bottom {
        font-size: 0.875rem;
        color: rgba(255, 255, 255, 0.7);
      }

      /* 球员能力图 */
      .ability-card {
        background: white;
        border-radius: 12px;
        padding: 1.5rem;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
      }

      .player-info {
        display: flex;
        align-items: center;
        gap: 1rem;
      }

      .player-avatar {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        object-fit: cover;
      }

      .player-details h3 {
        font-size: 1.25rem;
        margin: 0 0 0.25rem;
        color: #2c3e50;
      }

      .position {
        font-size: 0.875rem;
        color: #6c757d;
        display: block;
        margin-bottom: 0.5rem;
      }

      .player-tags {
        display: flex;
        gap: 0.5rem;
      }

      .tag {
        font-size: 0.75rem;
        padding: 0.25rem 0.75rem;
        background: #e9ecef;
        border-radius: 12px;
        color: #495057;
      }

      .ability-chart {
        margin-top: 1rem;
      }

      .ability-hexagon {
        width: 100%;
        height: auto;
      }

      /* 网格样式 */
      .grid-line {
        fill: none;
        stroke: #dee2e6;
        stroke-width: 0.5;
      }

      .grid-line.level-6 {
        stroke: #adb5bd;
        stroke-width: 1;
      }

      .grid-diagonal {
        stroke: #dee2e6;
        stroke-width: 0.5;
        stroke-dasharray: 4 2;
      }

      /* 能力值区域 */
      .ability-area {
        fill: rgba(13, 110, 253, 0.2);
        stroke: #0d6efd;
        stroke-width: 2;
      }

      .ability-area-2 {
        fill: rgba(220, 53, 69, 0.2);
        stroke: #dc3545;
      }

      .ability-area-3 {
        fill: rgba(25, 135, 84, 0.2);
        stroke: #198754;
      }

      /* 能力标签 */
      .ability-label {
        font-size: 12px;
        fill: #495057;
        text-anchor: middle;
        dominant-baseline: middle;
        font-weight: 500;
      }

      /* 网格层级 */
      .level-6 {
        opacity: 0.15;
      }
      .level-5 {
        opacity: 0.1;
      }
      .level-4 {
        opacity: 0.2;
      }
      .level-3 {
        opacity: 0.3;
      }
      .level-2 {
        opacity: 0.4;
      }
    </style>
  </head>
  <body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <div class="container">
        <a class="navbar-brand fw-bold" href="#">
          <span class="text-primary">Simply</span> Rugby
        </a>
        <button
          class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarNav"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav me-auto">
            <li class="nav-item">
              <a class="nav-link active" href="#">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">News</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Schedule</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Team</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">About Us</a>
            </li>
          </ul>
          <div class="nav-auth">
            <button class="btn btn-outline-light me-2">Login</button>
            <button class="btn btn-primary">Sign Up</button>
          </div>
        </div>
      </div>
    </nav>

    <!-- 英雄区域 -->
    <div
      id="heroCarousel"
      class="carousel slide carousel-fade"
      data-bs-ride="true"
    >
      <div class="carousel-indicators">
        <button
          type="button"
          data-bs-target="#heroCarousel"
          data-bs-slide-to="0"
          class="active"
          aria-current="true"
          aria-label="Slide 1"
        ></button>
        <button
          type="button"
          data-bs-target="#heroCarousel"
          data-bs-slide-to="1"
          aria-label="Slide 2"
        ></button>
        <button
          type="button"
          data-bs-target="#heroCarousel"
          data-bs-slide-to="2"
          aria-label="Slide 3"
        ></button>
      </div>
      <div class="carousel-inner">
        <div
          class="carousel-item active hero-section"
          style="background-image: url('../images/banner1.jpg')"
        >
          <div class="container">
            <h1 class="display-4 text-white">Pursue Excellence, Never Stop</h1>
            <div class="mt-4">
              <button class="btn btn-primary me-3">Learn More</button>
              <button class="btn btn-outline-light">Join Us</button>
            </div>
          </div>
        </div>
        <div
          class="carousel-item hero-section"
          style="background-image: url('../images/banner2.jpg')"
        >
          <div class="container">
            <h1 class="display-4 text-white">
              Professional Training, Achieve Dreams
            </h1>
            <div class="mt-4">
              <button class="btn btn-primary me-3">Training Camp</button>
              <button class="btn btn-outline-light">View Details</button>
            </div>
          </div>
        </div>
        <div
          class="carousel-item hero-section"
          style="background-image: url('../images/banner3.jpg')"
        >
          <div class="container">
            <h1 class="display-4 text-white">
              Team Collaboration, Win the Future
            </h1>
            <div class="mt-4">
              <button class="btn btn-primary me-3">Join Team</button>
              <button class="btn btn-outline-light">Contact Us</button>
            </div>
          </div>
        </div>
      </div>
      <button
        class="carousel-control-prev"
        type="button"
        data-bs-target="#heroCarousel"
        data-bs-slide="prev"
      >
        <span class="carousel-control-prev-icon"></span>
        <span class="visually-hidden">Previous</span>
      </button>
      <button
        class="carousel-control-next"
        type="button"
        data-bs-target="#heroCarousel"
        data-bs-slide="next"
      >
        <span class="carousel-control-next-icon"></span>
        <span class="visually-hidden">Next</span>
      </button>
    </div>

    <!-- 最新动态 -->
    <section class="latest-news py-5">
      <div class="container">
        <h2 class="section-title mb-4">Latest News</h2>
        <div class="row">
          <div class="col-md-4 mb-4">
            <div class="card">
              <img src="../images/1.jpg" class="card-img-top" alt="News 1" />
              <div class="card-body">
                <h5 class="card-title">Match Highlights</h5>
                <p class="card-text">2024-03-15</p>
              </div>
            </div>
          </div>
          <div class="col-md-4 mb-4">
            <div class="card">
              <img src="../images/1.jpg" class="card-img-top" alt="News 2" />
              <div class="card-body">
                <h5 class="card-title">Pre-season Training Camp Begins</h5>
                <p class="card-text">2024-03-12</p>
              </div>
            </div>
          </div>
          <div class="col-md-4 mb-4">
            <div class="card">
              <img src="../images/1.jpg" class="card-img-top" alt="News 3" />
              <div class="card-body">
                <h5 class="card-title">New Season Schedule Released</h5>
                <p class="card-text">2024-03-10</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 赛事统计 -->
    <section class="statistics bg-light py-5">
      <div class="container">
        <h2 class="section-title mb-4">Match Statistics</h2>
        <div class="row">
          <div class="col-md-4 mb-4">
            <div class="card">
              <div class="card-header">
                <h3>Team Rankings</h3>
              </div>
              <div class="card-body">
                <div class="rank-item">
                  <span>1. Eagles</span>
                  <span class="fw-bold">85.5</span>
                </div>
                <div class="rank-item">
                  <span>2. Tigers</span>
                  <span class="fw-bold">82.3</span>
                </div>
                <div class="rank-item">
                  <span>3. Warriors</span>
                  <span class="fw-bold">80.1</span>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-4 mb-4">
            <div class="card">
              <div class="card-header">
                <h3>Top Scorers</h3>
              </div>
              <div class="card-body">
                <div class="rank-item">
                  <span>John Smith</span>
                  <span class="fw-bold">25.5</span>
                </div>
                <div class="rank-item">
                  <span>Mike Johnson</span>
                  <span class="fw-bold">23.8</span>
                </div>
                <div class="rank-item">
                  <span>David Wilson</span>
                  <span class="fw-bold">21.2</span>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-4 mb-4">
            <div class="card">
              <div class="card-header">
                <h3>Top Assists</h3>
              </div>
              <div class="card-body">
                <div class="rank-item">
                  <span>Tom Brown</span>
                  <span class="fw-bold">15.2</span>
                </div>
                <div class="rank-item">
                  <span>Chris Davis</span>
                  <span class="fw-bold">14.8</span>
                </div>
                <div class="rank-item">
                  <span>Peter White</span>
                  <span class="fw-bold">13.5</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 球员能力图 -->
    <section class="player-abilities py-5">
      <div class="container">
        <h2 class="section-title mb-4">Player Ability Charts</h2>
        <div class="row">
          <div class="col-md-4 mb-4">
            <div class="ability-card">
              <div class="player-info mb-3">
                <img
                  src="../images/avatar.jpeg"
                  alt="James Chen"
                  class="player-avatar"
                />
                <div class="player-details">
                  <h3>James Chen</h3>
                  <span class="position">Forward / Eagles</span>
                  <div class="player-tags">
                    <span class="tag">Breakthrough</span>
                    <span class="tag">Power</span>
                  </div>
                </div>
              </div>
              <div class="ability-chart">
                <svg viewBox="0 0 200 200" class="ability-hexagon">
                  <!-- 背景网格 -->
                  <g class="grid">
                    <polygon
                      class="grid-line level-6"
                      points="100,10 182,50 182,150 100,190 18,150 18,50"
                    />
                    <polygon
                      class="grid-line level-5"
                      points="100,20 172,60 172,140 100,180 28,140 28,60"
                    />
                    <polygon
                      class="grid-line level-4"
                      points="100,40 156,70 156,130 100,160 44,130 44,70"
                    />
                    <polygon
                      class="grid-line level-3"
                      points="100,60 140,80 140,120 100,140 60,120 60,80"
                    />
                    <polygon
                      class="grid-line level-2"
                      points="100,80 124,90 124,110 100,120 76,110 76,90"
                    />
                    <!-- 对角线 -->
                    <line
                      class="grid-diagonal"
                      x1="100"
                      y1="10"
                      x2="100"
                      y2="190"
                    />
                    <line
                      class="grid-diagonal"
                      x1="182"
                      y1="50"
                      x2="18"
                      y2="150"
                    />
                    <line
                      class="grid-diagonal"
                      x1="182"
                      y1="150"
                      x2="18"
                      y2="50"
                    />
                  </g>
                  <!-- 能力值区域 -->
                  <polygon
                    class="ability-area"
                    points="100,30 165,80 165,130 100,170 35,130 35,80"
                  />
                  <!-- 能力标签 -->
                  <text x="100" y="15" class="ability-label">Speed</text>
                  <text x="180" y="60" class="ability-label">Power</text>
                  <text x="180" y="150" class="ability-label">Skill</text>
                  <text x="100" y="190" class="ability-label">Stamina</text>
                  <text x="20" y="150" class="ability-label">Defense</text>
                  <text x="20" y="60" class="ability-label">Awareness</text>
                </svg>
              </div>
            </div>
          </div>
          <div class="col-md-4 mb-4">
            <div class="ability-card">
              <div class="player-info mb-3">
                <img
                  src="../images/avatar.jpeg"
                  alt="Michael Lee"
                  class="player-avatar"
                />
                <div class="player-details">
                  <h3>Michael Lee</h3>
                  <span class="position">Center / Tigers</span>
                  <div class="player-tags">
                    <span class="tag">技术型</span>
                    <span class="tag">组织型</span>
                  </div>
                </div>
              </div>
              <div class="ability-chart">
                <svg viewBox="0 0 200 200" class="ability-hexagon">
                  <g class="grid">
                    <polygon
                      class="grid-line level-6"
                      points="100,10 182,50 182,150 100,190 18,150 18,50"
                    />
                    <polygon
                      class="grid-line level-5"
                      points="100,20 172,60 172,140 100,180 28,140 28,60"
                    />
                    <polygon
                      class="grid-line level-4"
                      points="100,40 156,70 156,130 100,160 44,130 44,70"
                    />
                    <polygon
                      class="grid-line level-3"
                      points="100,60 140,80 140,120 100,140 60,120 60,80"
                    />
                    <polygon
                      class="grid-line level-2"
                      points="100,80 124,90 124,110 100,120 76,110 76,90"
                    />
                    <line
                      class="grid-diagonal"
                      x1="100"
                      y1="10"
                      x2="100"
                      y2="190"
                    />
                    <line
                      class="grid-diagonal"
                      x1="182"
                      y1="50"
                      x2="18"
                      y2="150"
                    />
                    <line
                      class="grid-diagonal"
                      x1="182"
                      y1="150"
                      x2="18"
                      y2="50"
                    />
                  </g>
                  <polygon
                    class="ability-area ability-area-2"
                    points="100,25 170,70 170,140 100,175 30,140 30,70"
                  />
                  <text x="100" y="15" class="ability-label">Speed</text>
                  <text x="180" y="60" class="ability-label">Power</text>
                  <text x="180" y="150" class="ability-label">Skill</text>
                  <text x="100" y="190" class="ability-label">Stamina</text>
                  <text x="20" y="150" class="ability-label">Defense</text>
                  <text x="20" y="60" class="ability-label">Awareness</text>
                </svg>
              </div>
            </div>
          </div>
          <div class="col-md-4 mb-4">
            <div class="ability-card">
              <div class="player-info mb-3">
                <img
                  src="../images/avatar.jpeg"
                  alt="William Wang"
                  class="player-avatar"
                />
                <div class="player-details">
                  <h3>William Wang</h3>
                  <span class="position">Back / Warriors</span>
                  <div class="player-tags">
                    <span class="tag">速度型</span>
                    <span class="tag">防守型</span>
                  </div>
                </div>
              </div>
              <div class="ability-chart">
                <svg viewBox="0 0 200 200" class="ability-hexagon">
                  <g class="grid">
                    <polygon
                      class="grid-line level-6"
                      points="100,10 182,50 182,150 100,190 18,150 18,50"
                    />
                    <polygon
                      class="grid-line level-5"
                      points="100,20 172,60 172,140 100,180 28,140 28,60"
                    />
                    <polygon
                      class="grid-line level-4"
                      points="100,40 156,70 156,130 100,160 44,130 44,70"
                    />
                    <polygon
                      class="grid-line level-3"
                      points="100,60 140,80 140,120 100,140 60,120 60,80"
                    />
                    <polygon
                      class="grid-line level-2"
                      points="100,80 124,90 124,110 100,120 76,110 76,90"
                    />
                    <line
                      class="grid-diagonal"
                      x1="100"
                      y1="10"
                      x2="100"
                      y2="190"
                    />
                    <line
                      class="grid-diagonal"
                      x1="182"
                      y1="50"
                      x2="18"
                      y2="150"
                    />
                    <line
                      class="grid-diagonal"
                      x1="182"
                      y1="150"
                      x2="18"
                      y2="50"
                    />
                  </g>
                  <polygon
                    class="ability-area ability-area-3"
                    points="100,35 160,75 160,135 100,165 40,135 40,75"
                  />
                  <text x="100" y="15" class="ability-label">Speed</text>
                  <text x="180" y="60" class="ability-label">Power</text>
                  <text x="180" y="150" class="ability-label">Skill</text>
                  <text x="100" y="190" class="ability-label">Stamina</text>
                  <text x="20" y="150" class="ability-label">Defense</text>
                  <text x="20" y="60" class="ability-label">Awareness</text>
                </svg>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 赛程安排 -->
    <section class="schedule py-5">
      <div class="container">
        <h2 class="section-title mb-4">Match Schedule</h2>
        <div class="schedule-list">
          <div class="row">
            <div class="col-md-6 mb-4">
              <div class="schedule-category">
                <h3 class="category-title">Matches</h3>
                <div class="schedule-items">
                  <div
                    class="schedule-item d-flex align-items-center p-3 bg-light rounded"
                  >
                    <div class="match-info flex-grow-1">
                      <div class="team-vs fw-bold mb-1">Eagles vs Tigers</div>
                      <div class="match-meta text-muted">
                        <small>2024-03-20</small>
                      </div>
                    </div>
                    <div class="match-time mx-4">14:00</div>
                    <div class="match-status">
                      <span class="badge bg-success">Starting Soon</span>
                    </div>
                  </div>
                  <div
                    class="schedule-item d-flex align-items-center p-3 bg-light rounded mt-3"
                  >
                    <div class="match-info flex-grow-1">
                      <div class="team-vs fw-bold mb-1">Warriors vs Eagles</div>
                      <div class="match-meta text-muted">
                        <small>2024-03-25</small>
                      </div>
                    </div>
                    <div class="match-time mx-4">15:30</div>
                    <div class="match-status">
                      <span class="badge bg-warning text-dark">Preparing</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-6 mb-4">
              <div class="schedule-category">
                <h3 class="category-title">Training</h3>
                <div class="schedule-items">
                  <div
                    class="schedule-item d-flex align-items-center p-3 bg-light rounded"
                  >
                    <div class="match-info flex-grow-1">
                      <div class="team-vs fw-bold mb-1">Physical Training</div>
                      <div class="match-meta text-muted">
                        <small>Mon, Wed, Fri</small>
                      </div>
                    </div>
                    <div class="match-time mx-4">09:00</div>
                    <div class="match-status">
                      <span class="badge bg-info">Regular</span>
                    </div>
                  </div>
                  <div
                    class="schedule-item d-flex align-items-center p-3 bg-light rounded mt-3"
                  >
                    <div class="match-info flex-grow-1">
                      <div class="team-vs fw-bold mb-1">Tactical Training</div>
                      <div class="match-meta text-muted">
                        <small>Tue, Thu</small>
                      </div>
                    </div>
                    <div class="match-time mx-4">14:30</div>
                    <div class="match-status">
                      <span class="badge bg-info">Regular</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 球队风采 -->
    <section class="team-photos py-5 bg-light">
      <div class="container">
        <h2 class="section-title mb-4">Team Gallery</h2>
        <div class="row">
          <div class="col-md-3 mb-4">
            <img
              src="../images/1.jpg"
              class="img-fluid rounded"
              alt="球队照片1"
            />
          </div>
          <div class="col-md-3 mb-4">
            <img
              src="../images/1.jpg"
              class="img-fluid rounded"
              alt="球队照片1"
            />
          </div>
          <div class="col-md-3 mb-4">
            <img
              src="../images/1.jpg"
              class="img-fluid rounded"
              alt="球队照片2"
            />
          </div>
          <div class="col-md-3 mb-4">
            <img
              src="../images/1.jpg"
              class="img-fluid rounded"
              alt="球队照片3"
            />
          </div>
        </div>
      </div>
    </section>

    <!-- 页脚 -->
    <footer class="bg-dark text-light py-5">
      <div class="container">
        <div class="row">
          <div class="col-md-3 mb-4">
            <div class="footer-section">
              <h5>About Us</h5>
              <p class="mt-3">
                Dedicated to promoting and developing rugby, committed to
                nurturing excellent athletes and promoting rugby culture.
              </p>
            </div>
          </div>
          <div class="col-md-3 mb-4">
            <div class="footer-section">
              <h5>Quick Links</h5>
              <ul class="footer-links mt-3">
                <li><a href="#">Home</a></li>
                <li><a href="#">News</a></li>
                <li><a href="#">Schedule</a></li>
                <li><a href="#">Team</a></li>
                <li><a href="#">About Us</a></li>
              </ul>
            </div>
          </div>
          <div class="col-md-3 mb-4">
            <div class="footer-section">
              <h5>Contact Us</h5>
              <ul class="footer-contact mt-3">
                <li><i class="bi bi-telephone-fill me-2"></i>123-456-7890</li>
                <li>
                  <i class="bi bi-envelope-fill me-2"></i>info@example.com
                </li>
                <li>
                  <i class="bi bi-geo-alt-fill me-2"></i>1 Stadium Road, London
                </li>
              </ul>
            </div>
          </div>
          <div class="col-md-3 mb-4">
            <div class="footer-section">
              <h5>Follow Us</h5>
              <div class="social-links mt-3">
                <a href="#" class="social-link"
                  ><i class="bi bi-facebook"></i
                ></a>
                <a href="#" class="social-link"
                  ><i class="bi bi-twitter"></i
                ></a>
                <a href="#" class="social-link"
                  ><i class="bi bi-instagram"></i
                ></a>
                <a href="#" class="social-link"
                  ><i class="bi bi-youtube"></i
                ></a>
              </div>
            </div>
          </div>
        </div>
        <div class="footer-bottom text-center mt-4 pt-4 border-top">
          <p class="mb-0">&copy; 2024 Simply Rugby. All rights reserved.</p>
        </div>
      </div>
    </footer>

    <script src="././node_modules/jquery/dist/jquery.min.js"></script>
    <script src="././node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="././node_modules/axios/dist/axios.min.js"></script>
    <script>
      $(document).ready(function () {
        // 初始化轮播图
        const heroCarousel = new bootstrap.Carousel(
          document.querySelector("#heroCarousel"),
          {
            interval: 3000, // 降低轮播间隔时间
            pause: false,
            ride: true, // 确保自动轮播
            touch: true, // 允许触摸滑动
          }
        );

        // 防止轮播图文字动画重叠
        $("#heroCarousel").on("slide.bs.carousel", function () {
          $(".carousel-item .display-4, .carousel-item .mt-4").css(
            "opacity",
            "0"
          );
        });

        $("#heroCarousel").on("slid.bs.carousel", function () {
          $(
            ".carousel-item.active .display-4, .carousel-item.active .mt-4"
          ).css("opacity", "1");
        });

        // 导航栏滚动效果
        $(window).scroll(function () {
          if ($(this).scrollTop() > 50) {
            $(".navbar").addClass("navbar-scrolled");
          } else {
            $(".navbar").removeClass("navbar-scrolled");
          }
        });

        // 新闻卡片点击事件
        $(".card").click(function () {
          const newsTitle = $(this).find(".card-title").text();
          const newsDate = $(this).find(".card-text").text();
          // 这里可以添加新闻详情页面跳转逻辑
          console.log(`查看新闻: ${newsTitle} (${newsDate})`);
        });

        // 赛程项目悬停效果
        $(".schedule-item").hover(
          function () {
            $(this).addClass("shadow-sm");
          },
          function () {
            $(this).removeClass("shadow-sm");
          }
        );
      });
    </script>
  </body>
</html>
